<template>
  <div class="gird">
    <section class="van-doc-demo-block demo-icon" >
      <router-link :to="item.to" v-for="item in newslist" :key="item.id" tag="div"  class="van-col van-col--8" >
        <i class="van-icon ">
          <img :src="'../../static/gird/menu'+item.id+'.png'" alt="">
        </i>
      <span>{{item.title}}</span>
      </router-link>
    </section>
  </div>
</template>

<script>
export default {
  data: () => ({
    newslist:[
      {id:1,to:"/Chat/NewList",title:"new"},
      {id:2,to:"/Chat/Photos",title:"Photos"},
      {id:3,to:"/Chat/Goodslist",title:"Goodslist"},
      {id:4,to:"/home/newlist",title:"new"},
      {id:5,to:"/home/newlist",title:"new"},
      {id:6,to:"/home/newlist",title:"new"},
    ]
  })
};
</script>

<style>
  img {
  width: 60px;
  height: 60px;
}
.demo-icon {
  font-size: 0;
}
.demo-icon .van-col {
  text-align: center;
  height: 120px;
  float: none;
  display: inline-block;
  vertical-align: middle;
}
.demo-icon .van-icon {
  display: block;
  font-size: 32px;
  margin: 15px 0;
  color: rgba(69, 90, 100, 0.8);
}
.demo-icon span {
  font-size: 14px;
}
.van-col--8 {
  width: 33.33%;
}
#gird {
  width: 100%;
}
html{
  height: 100%;
}
</style>